<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="名称">
            <el-input v-model="search.fullName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="拥有者">
            <el-select v-model="search.owner" placeholder="拥有者">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="座机">
            <el-input v-model="search.phone" placeholder="座机"></el-input>
        </el-form-item>
        <el-form-item label="手机">
            <el-input v-model="search.mphone" placeholder="手机"></el-input>
        </el-form-item>
        <el-form-item label="公司名">
            <el-input v-model="search.company" placeholder="公司名"></el-input>
        </el-form-item>
        <el-form-item label="来源">
            <el-select v-model="search.source" placeholder="来源">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in sources" :label="item.text" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="search.state" placeholder="状态">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in states" :label="item.text" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initData">查询</el-button>
        </el-form-item>
    </el-form>
    <div>
        <el-button type="success" @click="openDialog()">添加</el-button>
        <el-button type="danger" @click="del()">批量删除</el-button>
    </div>
    <el-table
            :data="clues"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                fixed
                prop="fullName"
                label="线索名称"
                width="150">
        </el-table-column>
        <el-table-column
                prop="applicationValue.text"
                label="称呼"
                width="150">
        </el-table-column>
        <el-table-column
                prop="ownerUser.name"
                label="拥有者"
                width="120">
        </el-table-column>
        <el-table-column
                prop="company"
                label="公司名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="座机"
                width="120">
        </el-table-column>
        <el-table-column
                prop="mphone"
                label="手机"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sourceValue.text"
                label="线索来源"
                width="120">
        </el-table-column>
        <el-table-column
                prop="stateValue.text"
                label="线索状态"
                width="120">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small"  @click="openDialog(scope.row)">编辑</el-button>
                <el-button type="text" size="small"  @click="toDetail(scope.row.id)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--修改和添加的弹框-->
    <el-dialog title="线索" :visible.sync="dialogFormVisible">
        <el-form :model="clue">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="clue.fullName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="称呼" :label-width="formLabelWidth">
                <el-select v-model="clue.appellation" placeholder="请选择称呼">
                    <el-option v-for="item in appellations" :label="item.text" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="拥有者" :label-width="formLabelWidth">
                <el-select v-model="clue.owner" placeholder="拥有者">
                    <el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司名称" :label-width="formLabelWidth">
                    <el-input v-model="clue.company" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="网站" :label-width="formLabelWidth">
                    <el-input v-model="clue.website" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-input v-model="clue.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="clue.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="座机" :label-width="formLabelWidth">
                    <el-input v-model="clue.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机" :label-width="formLabelWidth">
                    <el-input v-model="clue.mphone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="来源" :label-width="formLabelWidth">
                    <el-select v-model="clue.source" placeholder="来源">
                        <el-option v-for="item in sources" :label="item.text" :value="item.value"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="clue.state" placeholder="状态">
                        <el-option v-for="item in states" :label="item.text" :value="item.value"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="clue.description"></el-input>
            </el-form-item>
            <el-form-item label="联系纪要" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="clue.contactSummary"></el-input>
            </el-form-item>
            <el-form-item label="下次联系时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="clue.nextContactTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="clue.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveClue">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            clue:{
                 id:undefined,
                 fullName:undefined,
                /**
                 * 数据来源于数据字典值appellation
                 */
                 appellation:undefined,//称呼
                 owner:undefined,//拥有者
                 company:undefined,
                 job:undefined,
                 email:undefined,
                 phone:undefined,
                 website:undefined,
                 mphone:undefined,
                 state:undefined,//线索状态
                 source:undefined,//线索来源
                 createBy:undefined,
                 editBy:undefined,
                 description:undefined,
                 contactSummary:undefined,
                 nextContactTime:undefined,
                 address:undefined,
            },
            search:{//查询条件
                fullName:undefined,
                owner:undefined,
                company:undefined,
                phone:undefined,
                mphone:undefined,
                source:undefined,
                state:undefined,
            },
            users:[],//所有的拥有者-->所有的用户,
            sources:[],//线索来源
            states:[], //线索状态
            appellations:[],//称呼
            clues:[],
            pageNum:1,
            pageSize:5,
            total:undefined,
            multipleSelection:[] //表格中选中的行对象
        },
        methods: {
            toDetail(id) {//跳转详情
                sessionStorage.setItem("clueId",id);
                location.href="detail.html"
            },
            handleSelectionChange(val) {//表格选中事件
                this.multipleSelection = val;
            },
            del(id){//删除
                let ids=[];
                if (id){//单个删除
                    ids.push(id)
                }else{//批量
                    this.multipleSelection.forEach(item=>{
                       ids.push(item.id)
                    })
                }
                //判断有无选中的行
                if (ids.length==0){
                    this.$message({
                        type:"warning",
                        message:"至少选中一条数据"
                    });
                    return;
                }

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送ajax删除
                    axios.delete(`/clue?ids=${ids.join(",")}`)
                        .then(resp=>{
                            let data=resp.data;
                            if (data.code==200){
                                this.$message({
                                    type:"success",
                                    message:"操作成功"
                                });
                                this.initData();//刷新表格数据
                            }else{
                                this.$message({
                                    type:"error",
                                    message:data.msg
                                });

                            }
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            openDialog(clue){
                let user=JSON.parse(sessionStorage.getItem("user"));
                //显示弹框
              this.dialogFormVisible=true;
              if (clue){//修改
                  this.clue={...clue}
                  //设置修改
                  this.clue.editBy=user.id
              }else{//添加
                this.clue={
                    id:undefined,
                    fullName:undefined,
                    /**
                     * 数据来源于数据字典值appellation
                     */
                    appellation:undefined,//称呼
                    owner:undefined,//拥有者
                    company:undefined,
                    job:undefined,
                    email:undefined,
                    phone:undefined,
                    website:undefined,
                    mphone:undefined,
                    state:undefined,//线索状态
                    source:undefined,//线索来源
                    createBy:undefined,
                    editBy:undefined,
                    description:undefined,
                    contactSummary:undefined,
                    nextContactTime:undefined,
                    address:undefined,
                };
                //设置创建人
                this.clue.createBy=user.id;
              }
            },
            saveClue(){//保存线索
                axios({
                    method:this.clue.id?"put":"post",
                    url:"/clue",
                    data:this.clue
                }).then(resp=>{
                    let data=resp.data;
                    if (data.code==200){
                        this.$message({
                            type:"success",
                            message:"操作成功"
                        });
                        this.initData();//刷新表格数据
                        this.dialogFormVisible=false;
                    }else{
                        this.$message({
                            type:"error",
                            message:data.msg
                        });

                    }
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.initData();//刷新数据
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val;
                this.initData();//刷新数据
            },
            initData(){//获取表格数据
                axios.get("/clue",{params:{
                        pageNumber:this.pageNum,
                        pageSize: this.pageSize,
                        ...this.search
                    }}).then(resp=>{
                        let data=resp.data;
                        this.clues=data.result;
                        this.total=data.count;
                })
            },
            getAllUser(){//获取所有的用户,拥有者
                axios.get("/user").then(resp=>{
                    let data=resp.data;
                    this.users=data.result
                })
            },
            getAllClueSource(){//获取所有的线索来源
                axios.get("/value/getDicValueByCode?code=clue_source").then(resp=>{
                    let data=resp.data;
                    this.sources=data.result;
                })
            },
            getAllClueState(){//获取所有的线索状态
                axios.get("/value/getDicValueByCode?code=clue_state").then(resp=>{
                    let data=resp.data;
                    this.states=data.result;
                })
            },
            getAllappellations(){//获取所有称呼
                axios.get("/value/getDicValueByCode?code=clue_appellation").then(resp=>{
                    let data=resp.data;
                    this.appellations=data.result;
                })
            }

        },
        created(){
            this.initData();
            this.getAllUser()//获取所有的用户,拥有者
            this.getAllClueSource();
            this.getAllClueState();
            this.getAllappellations();
        }
    })
</script>
</body>
</html>